<template>
	<div class="pages">
		<el-form size="small" ref="dataForm" :rules="rules" :model="dataForm" label-width="200px" class="demo-ruleForm">
			<div class="item_bg">
				<div class="item_body">
					<div class="tit">基本信息</div>
					<el-form-item label="登录账号" prop="username" disabled>
						<el-input v-model="dataForm.username" placeholder="请输入登录账号" clearable disabled></el-input>
					</el-form-item>
					<el-form-item label="登录密码" prop="password">
						<el-input v-model="dataForm.password" placeholder="请输入登录密码" disabled>
							<template slot="suffix">
								<span style="color: #409EFF;cursor: pointer;" @click="reset_password">重置密码</span>
							</template>
						</el-input>
					</el-form-item>
				</div>
			</div>
			<div class="item_bg">
				<div class="item_body">
					<div class="tit">企业信息</div>
					<el-form-item label="营业执照" prop="thumb">
						<div
							style="width: 140px;height: 140px;border: 1px solid #DCDFE6;border-radius: 4px;display: flex;align-items: center;">
							<el-image style="width: 100%" fit="contain" :src="dataForm.thumb"
								:preview-src-list="srcList">
							</el-image>
						</div>
					</el-form-item>
					<el-form-item label="企业名称" prop="name">
						<el-input v-model="dataForm.name" placeholder="请输入企业名称" clearable disabled></el-input>
					</el-form-item>
					<el-form-item label="统一社会信用代码" prop="card">
						<el-input v-model="dataForm.card" placeholder="请输入统一社会信用代码" clearable disabled></el-input>
					</el-form-item>
					<el-form-item label="企业实际住所" prop="address">
						<el-input v-model="dataForm.address" placeholder="请输入企业实际住所" clearable></el-input>
					</el-form-item>
					<el-form-item label="所在地区" prop="provinceId">
						<el-cascader :options="regionData" v-model="addressArr" @change="handleChange"
							placeholder="请选择省市区" style="width: 100%;"></el-cascader>
					</el-form-item>
					<el-form-item label="企业介绍" prop="content">
						<el-input type="textarea" v-model="dataForm.content" placeholder="请输入企业介绍" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系人" prop="contact">
						<el-input v-model="dataForm.contact" placeholder="请输入联系人" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="mobile">
						<el-input v-model="dataForm.mobile" placeholder="请输入联系电话" disabled>
							<template slot="suffix">
								<span style="color: #409EFF;cursor: pointer;"
									@click="dialogVisible_phone=true">更换手机号</span>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item style="text-align: right;">
						<el-button type="primary" @click="submitForm">提交</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>

		<el-dialog title="重置密码" :visible.sync="dialogVisible_pass" :before-close="handleClose_pass" width="640px">
			<el-form size="small" ref="dataForm2" :model="dataForm2" :rules="rules2" label-width="150px"
				style="padding-right: 100px;">
				<el-form-item label="重置密码" prop="newpass1">
					<el-input type="password" placeholder="请输入重置密码" v-model="dataForm2.newpass1" clearable></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="newpass2">
					<el-input type="password" placeholder="请输入确认密码" v-model="dataForm2.newpass2" clearable></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose_pass()" size="small">取 消</el-button>
				<el-button type="primary" size="small" @click="submitForm_pass">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="更换手机号" :visible.sync="dialogVisible_phone" :before-close="handleClose_phone" width="640px">
			<el-form size="small" ref="dataForm3" :model="dataForm3" :rules="rules3" label-width="150px"
				style="padding-right: 100px;">
				<el-form-item label="更换手机号" prop="mobile">
					<el-input type="text" placeholder="请输入手机号" v-model="dataForm3.mobile" clearable></el-input>
				</el-form-item>
				<el-form-item label="短信验证码" prop="code" required>
					<el-input type="text" placeholder="请输入短信验证码" v-model="dataForm3.code">
						<template slot="suffix">
							<span style="color: #409EFF;cursor: pointer;" @click="sendCode">
								{{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
							</span>
						</template>
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose_phone()" size="small">取 消</el-button>
				<el-button type="primary" size="small" @click="submitForm_phone">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	import {
		provinceAndCityData,
		regionData,
		rovinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from "element-china-area-data"
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.dataForm2.newpass2 !== '') {
						this.$refs.dataForm2.validateField('newpass2');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.dataForm2.newpass1) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				regionData,
				dataForm: {
					username: '',
					password: '',
					provinceId: '',
					cityId: '',
					areaId: '',
					name: '',
					card: '',
					address: '',
					content: '',
					contact: '',
					mobile: '',
					thumb: '',
					is_post: 1
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur'
					}],
					card: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入企业实际住所',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入企业介绍',
						trigger: 'blur'
					}],
					contact: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					provinceId: [{
						required: true,
						message: '请选择所在地区',
						trigger: 'blur'
					}],
					thumb: [{
						required: true,
						message: '请上传营业执照',
						trigger: 'change'
					}],
				},
				rules2: {
					newpass1: [{
						required: true,
						validator: validatePass,
						trigger: 'blur'
					}],
					newpass2: [{
						required: true,
						validator: validatePass2,
						trigger: 'blur'
					}],
				},
				rules3: {
					mobile: [{
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: "请输入正确的手机号",
							trigger: "blur",
						},
					]
				},
				addressArr: [],
				srcList: [],
				dataForm2: {
					oldpass: '',
					newpass1: '',
					newpass2: ''
				},
				dataForm3: {
					mobile: '',
					code: ''
				},
				dialogVisible_pass: false,
				dialogVisible_phone: false,
				isSending: false,
				countdown: 0
			}
		},
		methods: {
			getInfo() {
				this.$loading()
				this.$http.post('/api/corp/corp_edit', {}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
					if (res.result.provinceId && res.result.cityId && res.result.areaId) {
						this.addressArr = [String(res.result.provinceId), String(res.result.cityId), String(res
							.result
							.areaId)]
					} else {
						this.addressArr = []
					}
					if (this.dataForm.thumb) {
						this.srcList.push(process.env.VUE_APP_BASE_API + this.dataForm.thumb)
						this.dataForm.thumb = process.env.VUE_APP_BASE_API + this.dataForm.thumb
					}
				})
			},
			handleChange(value) {
				if (value) {
					this.dataForm.provinceId = value[0]
					this.dataForm.cityId = value[1]
					this.dataForm.areaId = value[2]
				}
			},
			reset_password() {
				this.dialogVisible_pass = true
			},
			submitForm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post('/api/corp/corp_edit', this.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 1500,
								onClose: () => {
									this.getInfo()
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			submitForm_pass() {
				this.$refs.dataForm2.validate((valid) => {
					if (valid) {
						this.$loading()
						this.dataForm2.oldpass = this.dataForm.password
						this.$http.post('/api/admin/setPassword', this.dataForm2).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 1500,
								onClose: () => {
									this.handleClose_pass()
									this.getInfo()
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			submitForm_phone() {
				this.$refs['dataForm3'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post('/api/admin/set_mobile', this.dataForm3).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success', //类型是成功
								duration: 1500,
								onClose: () => {
									this.handleClose_phone()
									this.getInfo()
								}
							});
						})
					} else {
						return false;
					}
				});
			},
			handleClose_pass() {
				this.$refs.dataForm2.resetFields()
				this.dialogVisible_pass = false
			},
			handleClose_phone() {
				this.isSending=false,
				this.countdown=0
				this.$refs.dataForm3.resetFields()
				this.dialogVisible_phone = false
			},
			sendCode() {
				if (this.countdown > 0 || this.isSending) {
					return;
				}
				let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
				if (!this.dataForm3.mobile) {
					return callback(new Error('手机号码不能为空'));
				} else if (!reg.test(this.dataForm3.mobile)) {
					return callback(new Error('手机号格式不正确'));
				}
				this.isSending = true;
				this.$http.post('/api/publics/getcode', {
					mobile: this.dataForm3.mobile
				}).then(res => {
					this.$message.success(res.msg)
					this.isSending = false;
					this.startCountdown();
				})
			},
			startCountdown() {
				this.countdown = 60;
				const timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(timer);
					}
				}, 1000);
			},
		},
		created() {
			this.getInfo()
		},
	}
</script>

<style lang="scss" scoped>
	.pages {
		background: transparent;
		padding: 0;

		.item_bg {
			background: #FFFFFF;
			padding: 20px;
			margin-bottom: 20px;

			.item_body {
				width: 550px;

				.tit {
					font-weight: 500;
					font-size: 18px;
					color: #333333;
					line-height: 25px;
					text-align: left;
					font-style: normal;
					margin-bottom: 25px;
				}
			}
		}


	}
</style>